@mixin mat-sort-theme($theme) {
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  .mat-sort-header-arrow {
    // Because the arrow is made up of multiple elements that are stacked on top of each other,
    // we can't use the semi-trasparent color from the theme directly. We convert it into a solid
    // color by taking the opacity from the rgba value and using the value to determine the
    // percentage of the background to put into foreground when mixing the colors together.
    $table-background: mat-color($background, 'card');
    $text-color: mat-color($foreground, secondary-text);
    $text-opacity: opacity($text-color);
    color: mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%);
  }
}

@mixin mat-sort-typography($config) { }
